import React, { useState, useEffect } from 'react'
import { create } from 'zustand'
import { CheckCircle, AlertTriangle, Info, X } from 'lucide-react'

// 类型定义
type ToastType = 'success' | 'error' | 'info'

interface ToastMessage {
  id: number
  message: string
  type: ToastType
}

interface ToastStore {
  toasts: ToastMessage[]
  addToast: (message: string, type: ToastType) => void
  removeToast: (id: number) => void
}

// Zustand store
const useToastStore = create<ToastStore>((set) => ({
  toasts: [],
  addToast: (message, type = 'info') => {
    const id = Date.now()
    set((state) => ({
      toasts: [...state.toasts, { id, message, type }]
    }))
    setTimeout(() => {
      set((state) => ({
        toasts: state.toasts.filter((t) => t.id !== id)
      }))
    }, 5000)
  },
  removeToast: (id) => {
    set((state) => ({
      toasts: state.toasts.filter((t) => t.id !== id)
    }))
  }
}))

export const toast = {
  success: (message: string) => useToastStore.getState().addToast(message, 'success'),
  error: (message: string) => useToastStore.getState().addToast(message, 'error'),
  info: (message: string) => useToastStore.getState().addToast(message, 'info')
}

// Toast 组件
interface ToastProps {
  toast: ToastMessage
  onRemove: (id: number) => void
}

const Toast: React.FC<ToastProps> = ({ toast, onRemove }) => {
  const [isExiting, setIsExiting] = useState(false)

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsExiting(true)
      setTimeout(() => onRemove(toast.id), 300)
    }, 4700)

    return () => clearTimeout(timer)
  }, [toast.id, onRemove])

  const handleRemove = () => {
    setIsExiting(true)
    setTimeout(() => onRemove(toast.id), 300)
  }

  const config = {
    success: {
      icon: <CheckCircle className="w-5 h-5 text-green-500" />,
      bg: 'bg-green-50 border-green-200',
      text: 'text-green-800'
    },
    error: {
      icon: <AlertTriangle className="w-5 h-5 text-red-500" />,
      bg: 'bg-red-50 border-red-200',
      text: 'text-red-800'
    },
    info: {
      icon: <Info className="w-5 h-5 text-blue-500" />,
      bg: 'bg-blue-50 border-blue-200',
      text: 'text-blue-800'
    }
  }[toast.type]

  return (
    <div
      className={`
        w-full max-w-sm p-3 rounded-lg shadow-md flex items-start space-x-3 
        border ${config.bg}
        transform transition-all duration-300
        ${isExiting ? 'opacity-0 -translate-y-4' : 'opacity-100 translate-y-0'}
      `}
    >
      <div className="flex-shrink-0">{config.icon}</div>
      <div className={`flex-1 text-sm ${config.text}`}>{toast.message}</div>
      <button onClick={handleRemove} className={`text-gray-400 hover:text-gray-600`}>
        <X className="w-4 h-4" />
      </button>
    </div>
  )
}

// ToastContainer 组件
export const ToastContainer: React.FC = () => {
  const { toasts, removeToast } = useToastStore()

  if (toasts.length === 0) {
    return null
  }

  return (
    <div className="fixed top-4 right-4 z-50 space-y-2">
      {toasts.map((t) => (
        <Toast key={t.id} toast={t} onRemove={removeToast} />
      ))}
    </div>
  )
} 